<template>
    <div class="orderInfoWrapper">
      <div class=top>
        <img src="http://static.52letsgo.cn/zz/wechatimg/bg_order_detail.png" alt="">
        <p class="topStatus" v-if="orderDetail.state === 0">未付款</p>
        <p class="topStatus" v-if="orderDetail.state === 1">未评价</p>
        <p class="topStatus" v-if="orderDetail.state === 2">交易成功</p>
        <p class="topStatus" v-if="orderDetail.state === 3">已取消</p>

        <p class="topDes" v-if="orderDetail.payState === 0">请在15分钟内完成订单</p>
        <p class="topDes" v-if="orderDetail.payState === 2">来个评价吧，帮助我们做的更好</p>
        <p class="topDes" v-if="orderDetail.payState === 3">欢迎下次光临</p>
        <p class="topDes" v-if="orderDetail.payState === 4">退款成功</p>
      </div>
      <div class="address">
        <div class="address-top">
          <div class="left"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_cart_name.png" alt=""><span>{{orderDetail.consignee}}</span></div>
          <div class="right"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_cart_mobile.png" alt=""><span>{{orderDetail.userMobile}}</span></div>
        </div>
        <div class="address-bottom">
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_cart_address.png" alt=""><span class="address-detail">{{orderDetail.detail}}</span>
        </div>
      </div>
      <div class=shopInfo>
        <p class="title">商品信息</p>
        <div class=shop-list>
          <div class="item" v-for="item in orderDetail.goods">
            <div class="left-img"><img v-bind:src="item.productImage" alt=""></div>
            <div class="right-info">
              <p class="sendDate">送餐日期:{{item.sendDate}}</p>
              <p class="goodName">{{item.productName}}</p>
              <div class="right-bottom">
                <p class="l-info">￥{{item.productPrice}}/份</p>
                <p class="m-info">X{{item.productCount}}</p>
                <p class="r-info">￥{{item.totalPrice}}</p>
              </div>
            </div>
          </div>
          <div class="discount" v-if="orderDetail.freePrice != 0">
            <p class="left">优惠</p>
            <p class="right">-{{orderDetail.freePrice}}</p>
          </div>
          <div class="total">
            <p class="left">合计</p>
            <p class="right">￥{{orderDetail.payPrice}}</p>
          </div>
        </div>
      </div>
      <div class="orderInfo">
        <p class="title">订单信息</p>
        <div class="orderNo">
          <p class="left">订单号</p>
            <p class="right">{{orderDetail.orderNo}}</p>
        </div>
        <div class="orderTime">
          <p class="left">下单时间</p>
            <p class="right">{{orderDetail.orderTime}}</p>
        </div>
        <div class="orderSendTime">
          <p class="left">送达时间</p>
            <p class="right">{{orderDetail.sendTime}}</p>
        </div>
      </div>

      <div class="orderComment" v-if="orderDetail.state == 2">
        <p class="title">订单评论</p>
        <div class="comentTop">
          <p class="left">{{orderDetail.comment.addTime}}</p>
          <p class="right">{{orderDetail.comment.ave}}分</p>
        </div>
        <div class="content">
          <p class="left">{{orderDetail.comment.content}}</p>
        </div>
      </div>

      <div style="height: 5rem;"></div>
      <div class="bottom-op">
        <div class="box" v-if="orderDetail.state == 0">
          <span @click="cancelOrder">取消订单</span>
          <span @click="toPay">去付款</span>
        </div>
        <div class="box" v-if="orderDetail.state == 1">
          <span @click="cancelOrder">取消订单</span>
          <span @click="toService">服务中心</span>
          <span @click="toComment">去评价</span>
        </div>
        <div class="box" v-if="orderDetail.state == 2">
          <span @click="toService">服务中心</span>
          <span @click="toPlaceOrder">再来一单</span>
        </div>
        <div class="box" v-if="orderDetail.state == 3">
          <span @click="toService">服务中心</span>
          <span @click="toPlaceOrder">再来一单</span>
        </div>
          <!--<span>取消订单</span>
          <span>服务中心</span>
          <span>再来一单</span>
          <span>去付款</span>
          <span>去评价</span>-->
      </div>
    </div>
</template>
<script>
  import { orderInfo } from './../../vuex/getters.js'
  import { set_orderInfo } from './../../vuex/actions.js'

  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    data () {
      return {
        orderDetail: '',
        userInfo: LocalStorageUtil.getItem("User"),
        userSign: LocalStorageUtil.getItem("userSign")
      }
    },
    vuex: {
      getters: {
        orderInfo
      },
      actions: {
        set_orderInfo
      }
    },
    created: function () {
      var data = {
        action: 'info',
        id: this.orderInfo.id
      }
      MyRequest.MyGetWithToast("OrderInfo", this, function (result, that) {
        that.orderDetail = result.data
        for(var i = 0; i < that.orderDetail.goods.length; i ++) {
          that.orderDetail.goods[i].productPrice = Global.toDecimal2(that.orderDetail.goods[i].productPrice)
          that.orderDetail.goods[i].totalPrice = Global.toDecimal2(that.orderDetail.goods[i].totalPrice)
        }
        that.orderDetail.freePrice = Global.toDecimal2(that.orderDetail.freePrice)
        that.orderDetail.payPrice = Global.toDecimal2(that.orderDetail.payPrice)
        Global.closeLoading()
      }, data)
    },
    methods: {
      toComment () {
        this.set_orderInfo(this.orderDetail)
        this.$router.go({path: '/comment'})
      },
      toPlaceOrder () {
        this.$router.go({path: '/'})
      },
      toService () {
        this.$router.go({path: '/serviceCenter'})
      },
      cancelOrder () {
        var data={
          userId: this.userInfo.id,
          userSign: this.userSign,
          orderNo: this.orderInfo.orderNo
        }
        MyRequest.MyGetWithToast("CancelOrder", this, function (result, that) {
          console.log(result)
          if(result.success) {
            Global.showToast('订单取消成功', that)
            history.go(-1)
          } else {
            Global.showToast(result.msg, that)
          }

        }, data);
      },
      toPay () {
        this.$router.go({
          name: 'pay', query: {
            freePrice: this.orderDetail.freePrice,
            orderNo: this.orderDetail.orderNo,
            orderTime: this.orderDetail.orderTime,
            totalPrice: this.orderDetail.totalPrice
          }
        });
      }
    }
  }
</script>
<style lang="less">
@import './orderInfo.less';

</style>
